<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>

<script src="dist/jquery-3.5.1.min.js"></script>
<script src="dist/js/popper.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<!-- 样式导入 -->
<link rel="stylesheet" href="dist/css/bootstrap.min.css">

<!-- 内联样式  -->

<style type="text/css">
@charset "UTF-8";
body {
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col">
    	<p></p>
    	<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
			<div class="btn-group mr-2" role="group" aria-label="First group">
				<button type="button" class="btn btn-secondary">1</button>
				<button type="button" class="btn btn-secondary">2</button>
				<button type="button" class="btn btn-secondary">3</button>
				<button type="button" class="btn btn-secondary">4</button>
			</div>
			<div class="btn-group mr-2" role="group" aria-label="Second group">
				<button type="button" class="btn btn-secondary">5</button>
				<button type="button" class="btn btn-secondary">6</button>
				<button type="button" class="btn btn-secondary">7</button>
			</div>
			<div class="btn-group" role="group" aria-label="Third group">
				<button type="button" class="btn btn-secondary">8</button>
			</div>	
			<div class="input-group">
				<div class="input-group-prepend">
					<div class="input-group-text" id="btnGroupAddon2">@</div>
				</div>
			<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
			</div>
		</div><p></p>
		
		<div class="alert alert-primary" role="alert">primary<span class="badge badge-success">New</span>
			<span class="badge badge-primary">方块标识</span>
			<span id="badge1" class="badge badge-pill badge-primary">椭圆标识</span>
			<a href="#badge1" class="badge badge-primary">方块links标识</a>
			button:<button type="button" id="testbutton" class="btn btn-primary">按钮<span class="badge badge-light">4</span></button>
		</div>
		
		<div>
			<nav aria-label="breadcrumb">
			  <ol class="breadcrumb">
			    <li class="breadcrumb-item " aria-current="page"><a href="#badge1">首页</a></li>
			    <li class="breadcrumb-item " aria-current="page"><a href="#badge1">列表</a></li>
			    <li class="breadcrumb-item active" aria-current="page"><a>详情</a></li>
			  </ol>
			</nav>
		</div>
		
		<div>
			<button type="button" class="btn btn-primary">有效的</button>
			<button type="button" class="btn btn-secondary">次要的</button>
			<button type="button" class="btn btn-success">成功操作</button>
			<button type="button" class="btn btn-danger">危险操作</button>
			<button type="button" class="btn btn-warning">谨慎操作</button>
			<button type="button" class="btn btn-info">消息</button>
			<button type="button" class="btn btn-light">非重要操作</button>
			<button type="button" class="btn btn-dark">黑色</button>
			
			<button type="button" class="btn btn-link">普通链接</button>
		</div>
		
		<p></p>
		<div>
			<div class="card" style="width: 18rem;">
			  <div class="card-header">
			       卡片
			  </div>
			  <img src="dist/imgs/test.png" class="card-img-top" alt="...">
			  <div class="card-body">
			  <h5 class="card-title">标题</h5>
	    		<p class="card-text">内容。。。</p>
			  </div>
			  <ul class="list-group list-group-flush">
			    <li class="list-group-item">卡片条</li>
			  </ul>
			</div>
		</div>
	</div>
    
    <div class="col">
		<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
		  <ol class="carousel-indicators">
		    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
		    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
		    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
		  </ol>
		  <div class="carousel-inner">
		    <div class="carousel-item active">
		      <img src="dist/imgs/gd1.png" class="d-block w-100" alt="...">
		      <div class="carousel-caption d-none d-md-block">
		        <h5>图片1</h5>
		        <p>图片1介绍</p>
		      </div>
		    </div>
		    <div class="carousel-item">
		      <img src="dist/imgs/gd2.png" class="d-block w-100 " alt="...">
		      <div class="carousel-caption d-none d-md-block">
		        <h5>图片2</h5>
		        <p>图片2介绍</p>
		      </div>
		    </div>
		    <div class="carousel-item">
		      <img src="dist/imgs/gd3.png" class="d-block w-100" alt="...">
		      <div class="carousel-caption d-none d-md-block">
		        <h5>图片3</h5>
		        <p>图片3介绍</p>
		      </div>
		    </div>
		  </div>
		  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
		    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
		    <span class="sr-only">上一图</span>
		  </a>
		  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
		    <span class="carousel-control-next-icon" aria-hidden="true"></span>
		    <span class="sr-only">下一图</span>
		  </a>
		</div>
		
		<div>
			<div class="accordion" id="accordionExample">
			  <div class="card">
			    <div class="card-header" id="headingOne">
			      <h2 class="mb-0">
			        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
			          	今日头条
			        </button>
			      </h2>
			    </div>
			
			    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
			      <div class="card-body">
			       	 今日头条
			      </div>
			    </div>
			  </div>
			  <div class="card">
			    <div class="card-header" id="headingTwo">
			      <h2 class="mb-0">
			        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
			          陈年旧事
			        </button>
			      </h2>
			    </div>
			    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
			      <div class="card-body">
			        陈年旧事
			      </div>
			    </div>
			  </div>
			  <div class="card">
			    <div class="card-header" id="headingThree">
			      <h2 class="mb-0">
			        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
			          兔后腿
			        </button>
			      </h2>
			    </div>
			    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
			      <div class="card-body">
			        拖后腿
			      </div>
			    </div>
			  </div>
			</div>
		</div>
		
		<p></p>
		<div>
			<div class="btn-group">
			  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			    请选择
			  </button>
			  <div class="dropdown-menu">
			    <a class="dropdown-item" href="#">修改</a>
			    <a class="dropdown-item" href="#">测试</a>
			    <a class="dropdown-item" href="#">详情</a>
			    <div class="dropdown-divider"></div>
			    <a class="dropdown-item" href="#">删除</a>
			  </div>
			</div>		
		</div>
		
	</div>
	
	
	
  </div>
</div>
</body>
<script>
$(document).ready(function(){
	//启动轮播图
	$('.carousel').carousel({
		  interval: 2000
		});
	//启动折叠
	$('.collapse').collapse()
});
</script>
</html>